/// PATTERN LIBRARY LOCATION
/// https://web.dev/design-system/pattern/prose
.prose {
  @extend .flow;
  @extend .wrapper;

  --flow-space: #{get-space('size-1')};

  max-width: $global-prose-element-max-width;
  display: flow-root;  // Clear floats

  p:empty {
    display: none;
  }

  > img,
  > table {
    width: 100%;
  }

  /// Add more space to elements that follow figures etc
  pre,
  pre + *,
  figure,
  figure + *,
  h2,
  h3,
  h4 {
    --flow-space: #{get-space('size-2')};
  }

  /// Main headings should have less space for their
  /// immediate sibling
  h2 + *,
  h3 + *,
  h4 + * {
    --flow-space: 1rem;
  }

  /// Stacked headings need to maintain larger spacing, however
  h2 + h3,
  h3 + h4 {
    --flow-space: #{get-space('size-1')};
  }

  /// Details gets more surrounding space, but the inner elements
  /// should all be equal
  details,
  details + * {
    --flow-space: #{get-space('size-2')};
  }

  details + details {
    margin-top: 0;
  }

  details > * {
    --flow-space: #{get-space('size-1')};
  }

  :not([class]) li {
    @extend .flow;

    line-height: unset;
  }

  /// Modidifies the custom list style positions to
  /// work with the larger line heights
  ul > li::before {
    inset: 1.2ex 0 0 0;
  }

  ol > li::before {
    line-height: 1.1;
    inset: 0.25ex 0 0 0;
  }

  /// An anchor that starts with a hash is a
  /// skip link, so it needs to be visually hidden
  /// until focused or hovered
  :is(h2, h3, h4, h5, h6) a[href^='#'] {
    font-size: 0.9em;
    text-decoration: none;
    color: transparent;
    transform: translateY(-0.2ex);
  }

  :is(h2, h3, h4, h5, h6):hover a[href^='#'],
  :is(h2, h3, h4, h5, h6) a[href^='#']:focus {
    @include apply-utility('color', 'mid-text');
  }

  /// Misc elements that need adjusting in this context
  .banner {
    font-size: get-size('base');
  }

  .banner,
  .banner + * {
    --flow-space: #{get-space('size-2')};
  }

  .stats {
    --auto-grid-min-item-size: 12rem;
    padding: 1em;
  }
}
